<!-- Copyright DTCC 2016 All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

	http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.-->
<!doctype html>
<html lang="en" ng-app=explorer>
	<header>

     		<script src = "/Chart.min.js"></script>
     		<script src = "/angular.min.js"></script>
			<script src = "/angular-animate.min.js"></script>
		<script src = "/socket.io.js"></script>
		<script src = "/scripts.js"></script>
     		<script src="http://d3js.org/d3.v2.js"></script>
     		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
     		<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="/style.css">
		<link rel="stylesheet" type="text/css" href="/font-awesome/css/font-awesome.min.css">
		<title> Hyperledger Explorer </title>
		<meta charset="utf-8">
	  	<meta name="viewport" content="width=device-width, initial-scale=1.0">

		 <div id="header" class="Header" ng-controller="HEADER">
	    		<h1><i class="fa fa-connectdevelop" aria-hidden="true"></i>&nbsp;Hyperledger Explorer </h1>
		</div>
		<script>var ledgerData = ((=it.ledgerData));
		var statsData = ((=it.statsData));
		</script>
	</header

<body onresize="restore()">

	<div  class="menu-trigger" ng-controller="TRIGGER" >
		<button class="menu-button" id="button" ng-click="activate()"> Menu </button>
	</div>

	<div id="navigation" class="Navigation" ng-controller="NAVIGATION">
		<u1>
			<li><a href="#A" onClick="hide()" ><i class="fa fa-cubes fa-lg" aria-hidden="true"></i>&nbsp; Recent Blocks</a></li>
			<li><a href="#B" onClick="hide()" ><i class="fa fa-object-group fa-lg" aria-hidden="true"></i>&nbsp;Current State</a></li>
			<li><a href="#C" onClick="hide()" ><i class="fa fa-search fa-lg" aria-hidden="true"></i>&nbsp;Search</a></li>
			<li><a href="#D" onClick="hide()" ><i class="fa fa-connectdevelop fa-lg" aria-hidden="true"></i>&nbsp;Network</a></li>
			<li><a href="#E" onClick="hide()" ><i class="fa fa-dashboard fa-lg" aria-hidden="true"></i>&nbsp;Visualization</a></li>
			<li><a href="#F" onClick="hide()" ><i class="fa fa-arrows-alt fa-lg" aria-hidden="true"></i>&nbsp;Transactions</a></li>
		</u1>
	</div>

	<div id="block" class="Block" ng-controller="BLOCKS">
		<a name="A"></a>
			<div class="Block_title">
				<h1><i class="fa fa-cubes" aria-hidden="true"></i>&nbsp;<b>Recent Blocks </b></h1>
			</div>

			<div class="Loading_symbol" ng-show="loader.loading">Loading...</div>
				<table>
					<thead>
						<tr>
							<th> Block# </th>
							<th> State Hash </th>
							<th> Previous Hash </th>
							<th> Log </th>
						</tr>
					</thead>
					<tbody>
						<tr ng-repeat="n in range" class="{{ info[$index].cssClass }}" ng-if=" size > $index ">
							<td data-label="Block#"> {{ size - $index -1 }} </td>
							<td data-label="State Hash"> {{ info[$index].stateHash | limitTo: 17 }}... </td>
							<td data-label="Previous Hash">{{ info[$index].previousBlockHash | limitTo: 17}}...</td>
							<td data-label="Log">

							<button ng-click="Update_selected_block($index)"> View </button>
							<form action='#openModal2' id="change2" style="display:none;>
								 <input type="submit" value="Details">
							</form>
								<div id="openModal2" class="modalDialog" style="font-size: 120%; text-align:left;">
								<div>
									<a href="#close" title="Close" class="close">X</a>
									<h2 style="text-align:center">Block {{infoc.blockNum}} </h2><hr/>
									<h2 style="text-align:center"> Extra Non Hash Data</h2>
										<p> <b> Date: </b> {{ infoc.nonHashData.localLedgerCommitTimestamp.date }} </p>
										<p> <b> Seconds: </b> {{ infoc.nonHashData.localLedgerCommitTimestamp.seconds}}	</p>
										<p> <b> Nanos: </b> {{ infoc.nonHashData.localLedgerCommitTimestamp.nanos}}	</p>
										<p> <b> Consensus Metadata: </b> {{ infoc.consensusMetadata}} </p>
										<p> <b> Transaction Results: </b> {{ infoc.nonHashData.transactionResults}}	</p>
										<hr>
									<h2 style="text-align:center" > Full Hash </h2>
										<p> <b> State Hash: </b>  {{ infoc.stateHash}} </p>
										<p> <b> Previous Hash: </b> {{ infoc.previousBlockHash }} </p>
										<hr>
									<h2 style="text-align:center">Transaction Information</h2>
										<h4>Total number of transactions: {{ infoc.transactions.length }} </h4>
										<div ng-repeat="transactions in infoc.transactions">
											<p style="text-align:center"> <b>Transaction#</b> {{ $index+1 }} </p>
											<p> <b>ChaincodeID:</b> {{transactions.chaincodeID }}</p>
											<p> <b>UUID:</b> {{ transactions.txid }} </p>
											<p> <b>Date:</b> {{ transactions.date }} </p>
											<p> <b>Seconds:</b> {{ transactions.timestamp.seconds}} </p>
											<p> <b>Nanos:</b> {{ transactions.timestamp.nanos}} </p>
											<p> <b>Level:</b> {{ transactions.confidentialityLevel }} </p>
											<p> <b>Payload:</b> {{ transactions.payload }} </p>
											<p> <b>Nonce:</b> {{ transactions.nonce }} </p>
											<p> <b>Cert:</b> {{ transactions.cert }} </p>
											<p> <b>Signature:</b> {{ transactions.signature }} </p>
											<hr>
										</div>
		 						</div>
							</div>
						</tr>
					</tbody>
				</table>
	</div>

	<div id="current" class="Current" ng-controller="CURRENT">
		<a name="B"></a>

		<div  class="Block_title">
			<h1> <b> <i class="fa fa-object-group" aria-hidden="true"></i>&nbsp;Current State of the BlockChain </b> </h1>
		</div>
			<div class="Current_info {{ info.cssClass }}">
				<text> <b>Height: </b> {{ info.height }} </text>
				<p> <b>Current Hash:</b> {{ info.currentBlockHash }} </p>
				<p> <b>Previous Hash:</b> {{ info.previousBlockHash }} </p>
			</div>
	</div>

	<div id="search" class="Search" ng-controller="SEARCH">
		<a name="C"></a>
			<div  class="Block_title">
				<h1><i class="fa fa-search" aria-hidden="true"></i>&nbsp;Search</h1>
			</div>
			<div class="Search_top">
				<input type = "text" ng-model="response" placeholder= "UUID/Block number">
				<button id="flip" ng-click="search()"> Search </button>
				<button ng-click="clear()"> Clear </button>
			</div>
			<div id="panel" class="Panel" style="display:none">
				<div class="Results">
					<p> {{ message }} </p>
					<p> {{ text1 }} </p>
					<p> {{ text2 }} </p>
					<p> {{ text3 }} </p>
					<p> {{ text4 }} </p>
					<p> {{ text5 }} </p>
					<p> {{ text6 }} </p>
					<p> {{ text7 }} </p>
				</div>
				<form action='#openModal' id="change" style="display:none;" class="Results_button">
					<input class="Submit" type="submit" value="View Transaction Details">
				</form>
			</div>

			<div id="openModal" class="modalDialog" style="font-size: 120%; text-align:left;">
				<div>
					<a href="#close" title="Close" class="close">X</a>
					<h2 style="text-align:center">Transaction Information</h2>
						<h4>Total number of transactions: {{ info.transactions.length }} </h4>
						<div ng-repeat="transactions in info.transactions" >
							<p style="text-align:center"> <b>Transaction#</b> {{ $index+1 }} </p>
							<p> <b>ChaincodeID:</b> {{transactions.chaincodeID }}</p>
							<p> <b>UUID:</b> {{ transactions.txid }} </p>
							<p> <b>Date: </b> {{ transactions.date}} </p>
							<p> <b>Seconds:</b> {{ transactions.timestamp.seconds}} </p>
							<p> <b>Nanos:</b> {{ transactions.timestamp.nanos}} </p>
							<p> <b>Level:</b> {{ transactions.confidentialityLevel }} </p>
							<p> <b>Payload:</b> {{ transactions.payload }} </p>
							<p> <b>Nonce:</b> {{ transactions.nonce }} </p>
							<p> <b>Cert:</b> {{ info.transactions.cert }} </p>
							<p> <b>Signature:</b> {{ info.transactions.signature }} </p>
							<hr>
						</div>
				</div>
			</div>
	</div>

	<div id="network" class="Network" ng-controller="NETWORK">
		<a name="D"></a>

		<div class="Block_title">
			<h1><b><i class="fa fa-connectdevelop" aria-hidden="true"></i>&nbsp;Network Information</b></h1>
		</div>
			<p style="padding-left:20px;">Number of Peers connected to Network:  {{ info.peers.length}}</p>
			<div class="Network_child">
				<table>
					<thead>
						<tr>
							<th> Name </th>
							<th> Address</th>
							<th> Type</th>
							<th> PKIID</th>
						</tr>
					</thead>
					<tbody>
						<tr ng-repeat="peers in info.peers " >
							<td data-label="Name"> <i class="fa fa-chain" style="font-weight:bold;color:#00ff00" aria-hidden="true"></i>&nbsp;{{info.peers[$index].ID.name}} </td>
							<td data-label="Address"> {{info.peers[$index].address }}  </td>
							<td data-label="Type"> {{info.peers[$index].type}} </td>
							<td data-label="PKIID"> {{info.peers[$index].pkiID}} </td>
						</tr>
					</tbody>
				</table>
			</div>
	</div>


	<div id="graph" class="Graph" onmouseover="lock();" onmouseout="redraw();">
		<a name="E"></a>
		<div class="Block_title">
			<h1><b><i class="fa fa-dashboard" aria-hidden="true"></i>&nbsp;Visualization</b></h1>
		</div>
				<div style="width:100%">
				<div id="performance" class="Performance" ng-controller="GRAPH">
					<div id="top" class="Top" style="margin-left:0px">
						<h2> <i class="fa fa-wpforms" aria-hidden="true"></i>&nbsp;Performance </h2>
					</div>
					<table class="PerfData">
                        <tr class="none">
												  <td class="param">Time</td><td class="val">{{ checkTime }}</td>
												</tr>
												<tr class="none">
                        <td class="param">Avg. Txn Latency</td><td class="val">{{ avgTxnLatency }}<span class="measure">ms</span>
                        <i class="fa fa-arrow-up" style="color:#ff3300;" aria-hidden="true" ng-if="avgTxnLatencySc > 0"></i>
                        <i class="fa fa-arrow-down" style="color:#00ff00;" aria-hidden="true" ng-if="avgTxnLatencySc < 0"></i>
                        <i class="fa fa-minus" style="color:#3399ff;" aria-hidden="true" ng-if="avgTxnLatencySc == 0"></i>
                        </td>
                        </tr>
                        <tr class="none">
                        <td class="param">Transaction Rate</td><td class="val">{{ txnRate }} <span class="measure">/sec</span>
                        <i class="fa fa-arrow-up" style="color:#00ff00; " aria-hidden="true" ng-if="txnRateSc > 0"></i>
                        <i class="fa fa-arrow-down" style="color:#ff3300; " aria-hidden="true" ng-if="txnRateSc < 0"></i>
                        <i class="fa fa-minus" style="color:#3399ff; " aria-hidden="true" ng-if="txnRateSc == 0"></i>
                        </td>
                        </tr>
                        <tr class="none">
                        <td class="param">Mining Rate</td><td class="val"> {{ mineRate }}<span class="measure">blocks/sec</span>
                        <i class="fa fa-arrow-up" style="color:#00ff00; " aria-hidden="true" ng-if="mineRateSc > 0"></i>
                        <i class="fa fa-arrow-down" style="color:#ff3300; " aria-hidden="true" ng-if="mineRateSc < 0"></i>
                        <i class="fa fa-minus" style="color:#3399ff; " aria-hidden="true" ng-if="mineRateSc == 0"></i>
                        </td>
                        </tr>
					</table>
				</div>

				<!--div id="chaincode" class="Chaincode">
					<div id="top" class="Top">
						<h2> Chaincode </h2>
					</div>
						<p style="padding-left:5%"> Transaction <b>TYPE </b>
						    <select name="mySelect" id="mySelect"
						      ng-options="option.name for option in data.Options track by option.id"
						      ng-model="data.selected"></select>
						      	<bars-chart chart-data="data_1" ></bars-chart>
						</p>

				</div-->

				<!--div id="volume" class="Volume">
					<div id="top" class="Top">
						<h2> Volume </h2>
					</div>
						<p style="padding-left:5%"> Transaction<b> LOAD </b>
							<select name="mySelect" id="mySelect"
						      ng-options="option.name for option in data2.Options track by option.id"
						      ng-model="data2.selected"></select>
								 <bars-chart chart-data="data_2" ></bars-chart>
						</p>
				</div-->

				<div id="tx_rate_cont" ng-controller="TX_RATE" ng-mouseover="focus=true;" ng-mouseout="checkChg();">
					<div id="top" class="Top">
						<h2> <i class="fa fa-line-chart" aria-hidden="true"></i>&nbsp;Transaction Rate </h2>
					</div>
						     <canvas id="tx_rate"></canvas>
				</div>

				<div id="blk_rate_cont" ng-controller="BLK_RATE">
                    <div id="top" class="Top">
                        <h2> <i class="fa fa-line-chart" aria-hidden="true"></i>&nbsp;Block Rate </h2>
                    </div>
                             <canvas id="blk_rate"></canvas>
                </div>
                </div>
                <div style="width:100%">
                <div id="blk_tx_cont"  class="Performance" ng-controller="BLK_TX">
                    <div id="top" class="Top">
                        <h2> <i class="fa fa-bar-chart" aria-hidden="true"></i>&nbsp;Transactions per Block </h2>
                    </div>
                             <canvas id="blk_tx"></canvas>
                </div>

                <div id="ch_tx_cont"  class="Performance" ng-controller="CH_TX">
                    <div id="top" class="Top">
                        <h2> <i class="fa fa-pie-chart" aria-hidden="true"></i>&nbsp;Transactions per Chaincode </h2>
                    </div><br/>
                             <canvas id="ch_tx"></canvas>
                </div>

                 <div id="appr_tx_cont"  class="Performance" ng-controller="APPR_TX">
                    <div id="top" class="Top">
                        <h2> <i class="fa fa-pie-chart" aria-hidden="true"></i>&nbsp;Approved/Rejected transactions </h2>
                    </div><br/>
                             <canvas id="appr_tx"></canvas>
                </div>

				<!--div id="graph2" class="Graph2" ng-controller="BAR_GRAPH">
					<div id="top" class="Top">
						<h2> Graph #3 </h2>
					</div>
						<svg id="bar_graph"> </svg>
				</div-->
				</div>
	</div>


	<div id="trans" class="Trans" ng-controller="TRANSACTIONS">
		<a name="F"></a>
			<div class="Block_title">
				<h1><b><i class="fa fa-arrows-alt" aria-hidden="true"></i>&nbsp;Latest Transactions</b></h1>
				<p> Display number of Transactions: <input type="number" step="1", min="1", max="{{trans.length}}", ng-model="row_amount2"/>
			</div>

			<div class="Loading_symbol" ng-show="loader.loading">Loading..</div>
					<table>
						<thead>
							<tr>
								<th> Block# Origin </th>
								<th> Seconds</th>
								<th> Nanos</th>
								<th> ID </th>
								<th> UUID </th>
								<th> Details </th>
							</tr>
						</thead>
						<tbody>
							<tr ng-repeat="items in trans | limitTo: row_amount2" class="{{ trans[$index].cssClass }}">
								<td data-label="Block# Origin">{{ trans[$index].origin}}</td>
								<td data-label="Seconds">{{ trans[$index].timestamp.seconds }}</td>
								<td data-label="Nanos">{{trans[$index].timestamp.nanos}} </td>
								<td data-label="ID">{{trans[$index].chaincodeID | limitTo: 12}}...</td>
								<td data-label="UUID">{{ trans[$index].txid | limitTo : 13}}...</td>
								<td data-label="Details">

										<button ng-click="Update_transaction_selection_index($index)"> Expand </button>
									<form action='#openModal3' id="change3" style="display:none">
										<input type="submit" value="Full Details">
									</form>



										<div id="openModal3" class="modalDialog" style="font-size: 120%; text-align:left;">
											<div>
												<a href="#close" title="Close" class="close">X</a>
												<h2 style="text-align:center" >Transaction Information</h2>
													<div>
														<p> <b>Type:</b> {{transs.type }}</p>
														<p> <b>ID:</b> {{ transs.chaincodeID }} </p>
														<p> <b>Date: </b> {{ transs.date }} </p>
														<p> <b>Seconds:</b> {{ transs.timestamp.seconds}} </p>
														<p> <b>Nanos:</b> {{ transs.timestamp.nanos}} </p>
														<p> <b>UUID:</b> {{ transs.txid }} </p>
														<p> <b>Payload:</b> {{ transs.payload }} </p>
														<p> <b>Confidence Level:</b> {{ transs.confidentialityLevel }} </p>
														<p> <b>Cert:</b> {{ transs.cert }} </p>
														<p> <b>Signature:</b> {{ transs.signature }} </p>
														<hr>
													</div>
											</div>
										</div>
								</td>
							</tr>
						</tbody>
					</table>
			</div>
		</div>

	</div>
</body>


<footer>
	<div class="Footer_content"></div>
</footer>



</html>
